<template>
<div id="root">
<!-- 登录模块 -->
    <div class="login" v-if="isshow">
      <h2>登录</h2>
   <el-form :model="user" status-icon :rules="rules"  label-width="100px" class="demo-ruleForm">
  <el-form-item label="账号" prop="username">
    <el-input type="text" v-model="user.username" autocomplete="off" placeholder="请输入手机号"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
   <el-input placeholder="请输入6~12位密码" v-model="user.password" show-password></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="login">提交</el-button>
    <el-button @click="isshow=!isshow">注册</el-button>
  </el-form-item>
</el-form>
    </div>
  <!-- 注册模块 -->
  <div class="zhuce" v-else>
     <h2>注册</h2>
<el-form :model="userinfo" :rules="userrules" status-icon  label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input type="text" v-model="userinfo.username" placeholder="输入手机号" autocomplete="off"></el-input>
  </el-form-item>
   <el-form-item label="密码" prop="password">
   <el-input placeholder="请输入6~12位密码" v-model="userinfo.password" show-password></el-input>
  </el-form-item>
    <el-form-item label="真实姓名" prop="realName">
   <el-input placeholder="请输入真实姓名" v-model="userinfo.realName" ></el-input>
  </el-form-item>
   <el-form-item label="性别" prop="realName">
   <el-radio v-model="userinfo.gender" label="男">男</el-radio>
  <el-radio v-model="userinfo.gender" label="女">女</el-radio>
  </el-form-item>
   <el-form-item>
    <el-button type="primary" @click="btn2()" class="btn" >注册</el-button>
  </el-form-item>
</el-form>
  </div>
</div>
</template>

<script>
import {http} from '../../uitl/request'
import {setToken} from '../../api/login'
export default {
    name:'vue-login',
   data() {
      return {
        isshow:true,
        userinfo:{
          gender:'',
          password:'',
          realName:'',
          username:''
        },
        user: {
        username: '',
          password: '',
        },
        rules: {
       username: [
            {
            required: true,
            message: '手机号不能为空'
          },
          {
            pattern: /^1[3|5|7|8|0|4|6|9]\d{9}$/,
            message: '手机号格式错误'
          }
          ],
          password: [
            {required:true,message:'密码不能为空' }
          ],
        },
        userrules:{
           username: [
            {
            required: true,
            message: '手机号不能为空'
          },
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: '手机号格式错误'
          }
          ],
          password: [
            {required:true,message:'密码不能为空' }
          ],
          realName:[ {required:true,message:'真实姓名不能为空' }]
        }
      };
    },
    methods: {
      //登录事件
    async login(){
     // const user=JSON.stringify(this.user)
  const {data:res}=await http.post('/user/login',this.user)
  if(res.data == null) {
    this.$message.error("用户名或密码错误")
    return
  }
    setToken(res.data)
    this.$router.push('/home')
    this.user={ username: '',password: '' }
   // this.$store.commit('settoken',res.data)
   window.setTimeout(()=>{
  //this.$store.dispatch('settoken',res.data)
  this.$message({
          message:'登录成功',
          type: 'success'
        });
        this.$router.go()
   },1000)
  
    },
    //  注册事件
   async btn2(){
   const {data:res}= await http.post('/user/register',this.userinfo)
 if (res.code!==1) {
   this.$message(res.msg)
 }else{
   this.$message({
          message:res.data,
          type: 'success'
        });
        this.isshow=true
        }
 
     }
    }
}
</script>

<style scoped>
h2{
  display: inline-block;
  text-align: center;
}
.login{
    width: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
   border: 1px solid rgb(0, 183, 255);
   border-radius:5px ;
}
.zhuce{
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid  rgb(0, 183, 255);
   border-radius:5px ;
}
.btn{
  width: 80%;
}
</style>
